<template>
  <el-drawer
    :title="form.id ? '修改产品' : '新增产品'"
    :visible.sync="$props.drawer"
    :before-close="handleClose"
    size="70%"
  >
    <div slot="title">
      <el-button type="text" @click="disabled=!disabled">{{ disabled ? '编辑' : '取消编辑' }}</el-button>
    </div>

    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="产品:" prop="product" :rules="{ required: true, message: '产品不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.product" :disabled="disabled" placeholder="请输入产品名称" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="产品图片:" prop="productImges" :rules="{ required: true, message: '上传产品图片'}">
        <Upload v-model="form.productImges" :disabled="disabled" :limit="1" />
      </el-form-item>
      <el-form-item label="海报:" prop="productPoster" :rules="{ required: true, message: '上传海报'}">
        <Upload v-model="form.productPoster" :disabled="disabled" :limit="1" />
      </el-form-item>
      <el-form-item label="产品标签:" prop="label" :rules="{ required: true, message: '产品标签不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.label" :disabled="disabled" placeholder="请输入产品标签" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="城市:" prop="area" :rules="{ required: true, message: '城市不能为空'}">
        <div style="width: 40%;">
          <Cascader v-model="form.area" :options="areaList" clearable :disabled="disabled" />
        </div>
      </el-form-item>
      <el-form-item label="产品分类:" prop="category" :rules="{ required: true, message: '产品分类不能为空'}">
        <div style="width: 40%;">
          <Select v-model="form.category" :disabled="disabled" :options="classifyList" filterable placeholder="请选择产品分类" clearable size="small" />
          <!-- <el-select v-model="form.category" filterable placeholder="请选择产品分类" clearable size="small">
            <el-option
              v-for="item in $props.classifyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
      </el-form-item>
      <el-form-item label="最高额度:" prop="quota" :rules="{ required: true, message: '额度不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.quota" :disabled="disabled" placeholder="请输入额度" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="佣金:" prop="commission" :rules="{ required: true, message: '佣金不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.commission" :disabled="disabled" placeholder="请输入佣金" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="融资比例" prop="financingRatio" :rules="{ required: true, message: '融资比例不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.financingRatio" :disabled="disabled" placeholder="请输入融资比例" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="融资期限" prop="term" :rules="{ required: true, message: '融资期限不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.term" :disabled="disabled" placeholder="请输入融资期限" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="每月利率" prop="interestRate" :rules="{ required: true, message: '每月利率不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.interestRate" :disabled="disabled" placeholder="请输入每月利率" size="small" clearable />
        </div>
      </el-form-item>

      <el-form-item label="还款方式" prop="repaymentMethod" :rules="{ required: true, message: '还款方式不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.repaymentMethod" :disabled="disabled" placeholder="请输入还款方式" size="small" clearable />
        </div>
      </el-form-item>

      <el-form-item label="产品详情" prop="productDetail.details" :rules="{ required: true, message: '产品详情不能为空'}">
        <QuillText key="1" :disabled="disabled" :data="form.productDetail.details" @onChange="detailChange" />
      </el-form-item>
      <el-form-item label="资料模板" prop="productDetail.dataTemplate" :rules="{ required: true, message: '资料模板不能为空'}">
        <QuillText key="2" :disabled="disabled" :data="form.productDetail.dataTemplate" name="template" @onChange="dataTemplateChange" />
      </el-form-item>
      <el-form-item label="申请流程" prop="productDetail.applicationProcess" :rules="{ required: true, message: '申请流程不能为空'}">
        <QuillText key="3" :disabled="disabled" :data="form.productDetail.applicationProcess" name="appli" @onChange="applicationChange" />
      </el-form-item>
      <el-form-item label="温馨提示" prop="productDetail.tips" :rules="{ required: true, message: '温馨提示不能为空'}">
        <QuillText key="4" :disabled="disabled" :data="form.productDetail.tips" name="tips" @onChange="tipsChange" />
      </el-form-item>
      <el-form-item label="风险提示" prop="productDetail.riskWarning" :rules="{ required: true, message: '风险提示不能为空'}">
        <QuillText key="5" :disabled="disabled" :data="form.productDetail.riskWarning" :value="form.productDetail" name="riskWarning" @onChange="warnChange" />
      </el-form-item>

      <el-form-item label="客服人员" prop="productDetail.customerService" :rules="{ required: true, message: '客服人员不能为空'}">
        <Upload v-model="form.productDetail.customerService" :disabled="disabled" :limit="1" />
      </el-form-item>
      <el-form-item label="佣金说明" prop="productDetail.commissionExplanation" :rules="{ required: true, message: '佣金说明不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.productDetail.commissionExplanation" :disabled="disabled" placeholder="请输入佣金说明" size="small" clearable />
        </div>
      </el-form-item>
      <el-form-item label="申请要求" prop="productDetail.applicationRequirements" :rules="{ required: true, message: '申请要求不能为空'}">
        <div style="width: 40%;">
          <Input v-model="form.productDetail.applicationRequirements" :disabled="disabled" placeholder="请输入申请要求" size="small" clearable />
        </div>
      </el-form-item>

      <el-form-item label="准入区域" prop="productDetail.accessArea" :rules="{ required: true, message: '准入区域不能为空'}">
        <div style="width: 40%;">
          <Cascader
            v-model="form.productDetail.accessArea"
            :disabled="disabled"
            :options="areaList"
            clearable
          />
        </div>
      </el-form-item>
      <el-form-item label="状态" prop="status" :rules="{ required: true, message: '请选择状态'}">
        <div style="width: 40%;">
          <!-- <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group> -->
          <Radio v-model="form.status" :disabled="disabled" :options="statusOptions" />
        </div>
      </el-form-item>

      <el-form-item v-if="!disabled">
        <el-button type="primary" :loading="loading" @click="onSubmit">{{ form.id ? '立即修改' : '立即创建' }}</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { area } from '@/utils/area'
// import QuillText from '@/components/QuillText/index'
import request from '@/utils/request'

export default {
  // components: {
  //   QuillText
  // },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    },
    classifyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        product: '',
        productDetail: {}
      },
      disabled: true,
      statusOptions: [{ label: 1, name: '启用' }, { label: 2, name: '禁用' }],
      loading: false,
      detail: {},
      areaList: (() => {
        const list = area.map(item => {
          return {
            value: item.ad_name,
            label: item.ad_name,
            children: item.children.map(item => ({ value: item.name, label: item.name }))
          }
        })
        return list
      })()
    }
  },
  watch: {
    defaultValue(val, val2) {
      const { province, city, productDetail } = val
      const area = [province, city]
      if (productDetail?.accessArea) {
        productDetail.accessArea = productDetail.accessArea.split('-')
      }
      this.form = {
        ...val,
        productDetail: { ...(productDetail || {}) },
        area
      }
      // console.log(this.form, '-000000')
    }
  },
  methods: {
    detailChange(val) {
      this.detail = {
        ...this.detail,
        details: val
      }
    },
    warnChange(val) {
      this.detail = {
        ...this.detail,
        riskWarning: val
      }
    },
    tipsChange(val) {
      this.detail = {
        ...this.detail,
        tips: val
      }
    },
    dataTemplateChange(val) {
      this.detail = {
        ...this.detail,
        dataTemplate: val
      }
    },
    applicationChange(val) {
      this.detail = {
        ...this.detail,
        applicationProcess: val
      }
    },
    onSubmit() {
      this.form.productDetail = {
        ...this.form.productDetail,
        ...this.detail
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 拆分城市
          const { area, productDetail } = this.form
          const province = area[0]
          const city = area[1]
          const accessArea = productDetail.accessArea.join('-')
          const params = {
            ...this.form,
            province,
            city,
            productDetail: {
              ...productDetail,
              accessArea
            }
          }
          // console.log(params, '----')

          Reflect.deleteProperty(params, 'area')
          this.request(params)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async request(params) {
      try {
        this.loading = true
        await request({
          url: 'system/product',
          method: params.id ? 'put' : 'post',
          data: params
        })
        this.$message({
          message: params.id ? '修改成功' : '添加成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$emit('add-success')
            this.$refs['form'].resetFields()
          }
        })
      } catch (error) {
        this.$message({
          message: error,
          type: 'warning'
        })
      } finally {
        this.loading = false
      }
    },
    handleClose() {
      this.form.id && this.$refs['form'].resetFields()
      this.$emit('close:drawer', false)
    }
  }
}
</script>

<style scoped>
  .item {
    display: flex;
    justify-content: right;
  }
  .required {
    color: red;
  }
</style>
